﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>第九师水利工程一张图</title>
<!--    引入各类样式-->
    <link href="openlayers/ol.css" rel="stylesheet">
    <link href="superMap_for_openlayers/iclient-ol.css" rel="stylesheet">
    <link href="layui/css/layui.css" rel="stylesheet">
    <link href="fontawesome/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/reset.css">
    <link href="css/video-js.css" rel="stylesheet">
    <link rel="icon" type="image/png" href="img/area-2.png">
    <!--引入 element-ui 的样式，-->
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <link href="css/index.css" rel="stylesheet">
    <style>
        .tooltip {
            position: relative;
            background: rgba(0, 0, 0, 0.5);
            border-radius: 4px;
            color: white;
            padding: 4px 8px;
            opacity: 0.7;
            white-space: nowrap;
        }
        .tooltip-measure {
            opacity: 1;
            font-weight: bold;
        }
        .tooltip-static {
            background-color: #ffcc33;
            color: black;
            border: 1px solid white;
            border-radius: 9px;
            font-size: 13px;
        }
        .tooltip-measure:before,
        .tooltip-static:before {
            border-top: 6px solid rgba(0, 0, 0, 0.5);
            border-right: 6px solid transparent;
            border-left: 6px solid transparent;
            content: "";
            position: absolute;
            bottom: -6px;
            margin-left: -7px;
            left: 50%;

        }
        .tooltip-static:before {
            border-top-color: #ffcc33;
        }
        .ol-popup {
            position: absolute;
            background-color: #000a3f80;
            color:white;
            border: 1px solid #28e5e9;
            -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
            filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
            padding: 15px;
            border-radius: 10px;
            bottom: 12px;
            left: -50px;
            min-width: 200px;
        }
        .ol-popup:after, .ol-popup:before {
            top: 100%;
            border: solid transparent;
            content: " ";
            height: 0;
            width: 0;
            position: absolute;
            pointer-events: none;
        }
        .ol-popup:after {
            border-top-color: #28e5e9;

            border-width: 10px;
            left: 48px;
            margin-left: -10px;
        }
        .ol-popup:before {

            border-width: 11px;
            left: 48px;
            margin-left: -11px;
        }
        .ol-popup-closer {
            text-decoration: none;
            position: absolute;
            top: 2px;
            right: 8px;
            color: white;
        }
        .ol-popup-closer:after {
            content: "✖";
        }
        #popup-content p{
            margin-bottom: 5px;
        }
        ::-webkit-scrollbar {
            /*滚动条整体样式*/
            width: 6px; /*高宽分别对应横竖滚动条的尺寸*/
            height: 0px;
            cursor: pointer;
        }
        .noScroll::-webkit-scrollbar {
            /*滚动条整体样式*/
            width: 0px; /*高宽分别对应横竖滚动条的尺寸*/
            height: 0px;
        }

        .fsgxReal::-webkit-scrollbar {
            /*滚动条整体样式*/
            width: 0px; /*高宽分别对应横竖滚动条的尺寸*/
            height: 6px;
        }

        ::-webkit-scrollbar-thumb {
            /*滚动条里面小方块*/
            border-radius: 999px;
            box-shadow: inset 0 0 5px rgba(97, 184, 179, 0.1);
            background: #78b4b4;
        }
        ::-webkit-scrollbar-track {
            /*滚动条里面轨道*/
            box-shadow: inset 0 0 5px rgba(87, 175, 187, 0.1);
            border-radius: 10px;
            background: #ededed;
        }





        .ol-popup_map {
            position: absolute;
            background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#28e5e9cc), to(#0efcff4d));
            color:white;
            -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
            filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
            padding: 10px 15px 15px 15px;
            border-radius: 10px;
            bottom: 37px;
            left: -202px;
            min-width: 400px;
            min-height: 450px;
        }
        .ol-popup_map:after, .ol-popup_map:before {
            top: 100%;
            border: solid transparent;
            content: " ";
            height: 0;
            width: 0;
            position: absolute;
            pointer-events: none;
        }
        .ol-popup_map:after {
            border-top-color: white;
            border-width: 10px;
            left: 48px;
            margin-left: 150px;
        }
        .ol-popup_map:before {

            border-width: 11px;
            left: 48px;
            margin-left: -11px;
        }
        .ol-popup-closer_map {
            text-decoration: none;
            position: absolute;
            top: 2px;
            right: 8px;
            color: white;
        }
        .ol-popup-closer_map:after {
            content: "✖";
        }
        .env_information tr{
            height: 39.8px;
        }
        .env_information img{
            margin-top: 5px;
        }
        .plant>li {
            width: 23%;
            height: 100%;
        }
        .element_talbe_dev .layui-table {
            width: 100%;
            color: white;
            background-color: #ffffff00;
        }
        .element_talbe_dev .layui-table-cell {
            padding: 0;
            text-align: center;
        }
        .element_talbe_dev .layui-table-header{
            background-color: #FAFAFA00;
        }
        .element_talbe_dev .layui-table-header{
            border-color: #28e5e9;
        }
        .layui-table-page{
            border-color: #28e5e9;
        }
        .layui-laypage .layui-laypage-curr .layui-laypage-em {
            background-color: #28e5e9;
        }

        .layui-laypage a, .layui-laypage span {
            color: #28e5e9;
        }
        .layui-disabled, .layui-disabled:hover {
            color: #28e5e9!important;
            cursor: not-allowed!important;
        }

        .element_talbe_dev .layui-table td, .element_talbe_dev .layui-table th,.element_talbe_dev .layui-table-view{
            border-width: 1px;
            border-style: solid;
            border-color: #28e5e9;
        }
        .element_talbe_dev .layui-table th{
            border-width: 1px;
            border-style: solid;
            border-color: #28e5e9;
            font-size: 16px;
        }
        .element_talbe_dev .layui-table thead tr{
            background-color: #0efcff4d;
            color: #0EFCFF;;
            height: 45.55px;
        }
        .layui-table-view {
            margin: 0;
        }
        .element_talbe_dev .layui-table tbody tr:hover{
            background-color: #0efcff4d;
        }
        input::-webkit-input-placeholder {
            color: white;
        }

        .layui-form-select .layui-input {
            background-color: #28e5e980;
            color: white;
            border: 0;
        }
        .layui-form-select .layui-edge {
            border-top-color: white;
        }
        .layui-form-selected dl {
            color: white;
            background-color: #000a3ff5;
        }
        .layui-form-item {
            margin-bottom: 13px;
        }
        #element_describe thead tr{
            background-color: #f2f4fe;
        }
        #element_describe .layui-table td{
            border-color: #dfdfdf;
        }
        #element_describe .layui-table[lay-even] tr:nth-child(even) {
            background-color: #f2f4fe;
        }
        #element_describe table {
            width: 95%;
            margin-left: 2.5%;
        }
        .olPopupProject {
            min-height: 30px;
        }

        .boxTitle {
            font-size: .9vw;
            margin-top: 0.8vw;
        }





    </style>

    <style lang="less" >
        /*    vue element样式*/
        .el-input__inner {
            background-color: rgba(40, 229, 233, .5);
            border: 0px solid #DCDFE6;
            color: #fff;
        }

        .el-select__caret {
            color: #ffffff !important;
        }
        .el-select-dropdown {
            border: 0px solid #E4E7ED;
            background-color: #fff0;
        }
        .el-select-dropdown__item {
            color: #fff;
        }
        .el-select-dropdown__list {
            background: #000a3fc4;
        }
        .el-select-dropdown__item.hover{
            background-color: rgba(40, 229, 233, .5);
        }
        .el-select-dropdown__item.selected {
            color: #fff;
        }
        .el-select-dropdown[x-placement^=bottom] .popper__arrow::after {
            border-bottom-color: #000a3fc4;
        }
        .el-select-dropdown[x-placement^=bottom] .popper__arrow {
            border-bottom-color: #000a3fc4;
        }
        .el-scrollbar__thumb {
            background-color: #90939987;
        }
        .el-switch .layui-form-checkbox {
            display: none;
        }
        #app_1 .el-switch{
            position: absolute;
            width: 150px;
        }
        .el-select-gc {
            display: inline-block;
            position: absolute;
            top: 15.7%;
            width: 360px;
            left: 3%;
        }
        .qdxs {
            display: inline-block;
            position: absolute;
            top: 15.7%;
            left: 25%;
            background-color: #000a3f82;
            width: 7%;
            height: 21px;
            border-radius: 10px;
            padding: 5px 8px;
        }
        .qdxsShow {
            display: inline-block;
            position: absolute;
            top: 21%;
            left: 28%;
        }
        .qdxsText {
            display: inline-block;
            position: absolute;
            top: 25%;
            left: 28%;
        }

        .fsgx{
            position: absolute;
            width: 25%;
            padding:10px;
            height: 84%;
            top:12%;
            left:1.2%;
            background-color: rgba(0, 10, 63, 0.51);
            border-radius: 10px;
            display: none;
        }

        .fsgxReal{
            position: absolute;
            width: 24.5%;
            height: 77.9%;
            top: 19%;
            left:2%;
            border-radius: 10px;
            display: none;
            overflow: scroll;
        }
        .fsgcContainer0{
            position: absolute;
            height: 100%;
            display: block;
            width: 700px;

        }
        .fsgcContainer1{
            position: absolute;
            height: 100%;
            display: block;
            margin-left: 2%;
        }
        .fsgxImg{
            width: 95.7%;
            height: 98%;
            position: absolute;
        }
        .fsgxTitle{
            color: #0efcff;
            font-size: 16px;
            margin-top: 2.7%;
            text-align: center;
        }
        .fsgxContent{
            z-index: 999;
            margin-top: 10%;
            margin-left: 2%;
            position: absolute;
        }
        .el-collapse {
            border-top: 1px solid #28e5e9;
            border-bottom: 1px solid rgba(235, 238, 245, 0);
        }
        .fsgcContainer1 .el-collapse {
            margin-top: 3px;
        }
        .el-collapse .el-collapse {
            border-top: 0px solid #28e5e9;
        }

        .el-collapse-item__header.is-active {
            border-bottom-color: #28e5e9;
        }
        .el-collapse-item__header {
            background-color: #28e5e900;
            border-bottom: 1px solid #28e5e9;
            color: #fff;

        }
        .el-collapse-item__wrap {
            background-color: #28e5e900;
            border-bottom: 1px solid rgba(40, 229, 233, 0);

        }

        .el-collapse-item__content {
            color: #fff;
            padding-left:20px;
            padding-bottom: 0px;
        }
        .header-icon{
            margin-left: 10px;
            font-size: 16px;
            margin-right: 5px;
        }
        .fsgxCss{
            border-bottom: 1px solid #28e5e9;


        }
        .fsgxDivHead{
            line-height:48px;
            height: 48px;
            display: inline-block;
        }
        .fsgxDiv{
            margin-left: 13px;
            line-height:48px;
            height: 48px;
            display: inline-block;
        }
        .el-collapse-item__arrow {
            margin-left: 30px;
        }
        .el-button.is-round {
            border-radius: 20px;
            padding: 5px 10px;
            background-color: #409eff00;
            border-color: #0efcff;
        }
        .skSelect {
            display: inline-block;
            position: absolute;
            top: 12.5%;
            left: 28%;
        }
        .skSelect .el-input__inner {
            background-color: #000a3f82;
            border: 1px solid #0efcff;
        }
        .czContent{
            display: block;
        }

        .el-dialog__header {
            padding: 0px 0px 10px;
        }
        .dialog-title {
            text-align: center;
            font-size: 18px;
            font-weight: 700;
            overflow: hidden;
            padding: 10px 5px;
        }
        .dialog-title i {
            /*color: #45A4F9;*/
            /*!* color: #0B2278; *!*/
            font-size: 19px;
            line-height: 38px;
        }

        .el-table::-webkit-scrollbar {
            /*滚动条整体样式*/
            width: 3px; /*高宽分别对应横竖滚动条的尺寸*/
            height: 0px;
        }
        .szInfoContent::-webkit-scrollbar-thumb {
            /*滚动条里面小方块*/
            border-radius: 10px;
            box-shadow: inset 0 0 5px rgba(97, 184, 179, 0.1);
            background: #78b4b4;
        }
        .szInfoContent::-webkit-scrollbar-track {
            /*滚动条里面轨道*/
            box-shadow: inset 0 0 5px rgba(87, 175, 187, 0.1);
            border-radius: 10px;
            background: #ededed;
        }
        .czChart{
            height: 455px;
            width: 455px;
        }
        .el-dialog--center .el-dialog__body {
            text-align: initial;
            padding: 0px;
        }
        .paddingRow{
            padding-top: 20px;
        }
        .paddingRow .el-input__inner {
            background-color: #fff;
            border: 1px solid #DCDFE6;
            color: #606266;
        }
        .czDateTitle{
            font-size: 16px;
            font-weight: 700;
        }
        .szInfoContent .el-button {
            padding: 10px 12px;
            margin-left: 45%;
        }

        .projectTitleRight{
            display: inline-block;
            width: 32%;
        }
        .projectTitleLeft{
            display: inline-block;
            width: 35%;
            margin-left: 15px;
            margin-bottom: 10px;
        }
        .projectTitleLeftCount{
            width: 15%;
            margin-left: 10px;
            margin-bottom: 10px;
            display: none;
        }

        .frontPage .el-table{
            background-color: #fff0;
        }
        .frontPage .el-table tr {
            background-color: #FFF0;
        }
        .frontPage .el-table th.el-table__cell {
            background-color: #fff0;
        }
        .frontPage .el-table td.el-table__cell, .frontPage .el-table th.el-table__cell.is-leaf {
            border-bottom: 1px solid #28e5e9;
        }
        .frontPage .el-table--border .el-table__cell{
            border-right: 1px solid #28e5e9;
        }
        .frontPage .el-table--border, .frontPage .el-table--group {
            border: 2px solid #28e5e9;
        }
        .frontPage .el-table::before {
            height: 0px;
        }
        .frontPage .el-table--border::after, .frontPage .el-table--group::after {
            width: 0px;
        }
        .el-table thead {
            color: #fff;
            font-weight: 500;
        }
        .el-table {
            color: #ffffff;
        }
        .pageFooter{
            padding:15px 10px;
            display: inline-block;
            width: 50%;
        }
        .frontPage .el-pager li {
            background: #FFF0;
            min-width: 5.5px;
        }
        .frontPage .el-pagination button:disabled {
            color: #C0C4CC;
            background-color: #fff0;
        }
        .frontPage .el-pager li.btn-quicknext,.frontPage .el-pager li.btn-quickprev {
            color: #fff;
        }

        .frontPage .el-pagination .btn-next, .frontPage .el-pagination .btn-prev {
            background: center center no-repeat #fff0;
            color: #ffffff;
        }
        .frontPage .active {
            border-bottom: 0.02vw solid rgb(40, 229, 233);
            border-top: 0.02vw solid rgb(40, 229, 233);
            border-right: 0.02vw solid rgb(40, 229, 233);
            border-left: 0.02vw solid rgb(40, 229, 233);
        }
        .frontPage .el-pager li.active {
            color: rgb(40, 229, 233);
            cursor: default;
        }
        .frontPage .el-pagination {
            color: #ffffff;
        }
        .frontPage .el-pagination__jump {
            color: #ffffff;
        }
        .el-table .el-table__cell {
            padding: 5px 0;
        }

        .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
            background-color: rgba(255, 255, 255, 0.25);
        }
        .frontPage .el-button:focus,.frontPage .el-button:hover {
            color: rgb(40, 229, 233);
            border-color: rgb(40, 229, 233);
            background-color: rgba(255, 255, 255, 0);
        }
        .frontPage .el-button {
            background: #fff0;
            border: 1px solid rgba(255, 255, 255, 0);
            color: rgb(40, 229, 233);
            font-size: 18px;
        }

        .frontPage ::-webkit-scrollbar {
            width: 0px;
        }
        .monitorDay img {
            width: 99%;
            left: 2px;
        }
        .monitorDay .boxTitle {
            margin-top: 0.6vw;
        }
        .monitorClass{
            display: inline-block;
            position: absolute;
            top: 24%;
            left: 77.7%;
        }
        .monitorClass .el-tabs{
            width: 393px;
        }

        .monitorClass .el-tabs__item:hover {
            color: rgb(40, 229, 233);
            cursor: pointer;
        }
        .monitorClass .el-tabs__item.is-active {
            color: rgb(40, 229, 233);
        }
        .monitorClass .el-tabs__active-bar {
            background-color: rgb(40, 229, 233);
        }
        .monitorClass .el-tabs__item {
            color: #fff;
        }
        .qdxs .el-switch__label {
            color: #fff;
        }
        .el-loading-spinner i {
            font-size: 30px;
        }
        .el-loading-spinner .el-loading-text {
            font-size: 25px;
        }
        .projectTitleLeftCount .el-button {
            background: rgba(40, 229, 233, .5);
            border: 1px solid rgba(255, 255, 255, 0);
            color: #fff;
            font-size: 14px;
            padding:12px 15px;
        }
        .projectTitleLeftCount .el-button:focus,.projectTitleLeftCount .el-button:hover {
            color: #fff;
            border: 1px solid rgba(255, 255, 255, 0);
            background: rgba(40, 229, 233, .5);
        }
        .el-dialog{
            margin-top: 13vh !important;
        }
        .czContent .el-table thead,.czContent .el-table {
            color: #000;
        }
        .czContent .el-table .el-table__cell {
             padding: 12px 0;
        }
        .reservoirClass{
            height: 461px;
            overflow: auto;
        }






    </style>
</head>

<!-- 黄瑶 -->


<body>
    <div class="main" >
        <div class="nav">第九师水利一张图</div>
        <div class="nav_btn">
            <div class="btn_left" >
                <a href="projectInfo.html" style="margin-right: 78px;">
                    <div class="btn_list listActive" ><p style="margin-left: 20px;">水利一张图</p></div>
                </a>
                <a href="real_time_monitor.html" style="margin-right: 30px;">
                    <div class="btn_list" ><p style="margin-left: 28px;">实时监测</p></div>
                </a>
            </div>
            <div class="btn_right" >
                <a href="fillout_data.html" style="margin-right: 85px;">
                    <div class="btn_list" ><p style="margin-left: 28px;">灌区信息</p></div>
                </a>
                <a href="system_set.html" style="margin-right: 30px;">
                    <div class="btn_list" ><p style="margin-left: 26px;">系统管理</p></div>
                </a>

            </div>
        </div>
        <div class="content layui-anim layui-anim-scale"  style="margin-left: 1%;" >

            <div id="map" style="position: absolute;width: 101%; height: 102.5%; margin: auto;">

            </div>
            <div class="baseBoxLeft left szdd" style="position: absolute;background-color: #000a3f82;width: 22%;height: 100.5%;border-radius: 10px;margin-left: 10px; margin-top: 10px;">
                <div class="boxTitle" style="margin-left: 10px;">水利工程查询</div>
                <img src="img/right_big.png" alt="">
            </div>
            <div class="baseBoxLeft left szdd"  style="position: absolute;background-color: #000a3f82;width: 17%;height: 7%;border-radius: 10px;margin-left: 82%; margin-top: 10px">
                <div class="layui-btn-group" style="margin-left: 4%;margin-top: 10px;height: 45px;">
                    <button id="type_c0" onclick="layerChange(0)" type="button" class="layui-btn" style="background: rgba(40, 229, 233, .5);border-radius: 10px 0 0 10px;border:3px solid #28e5e9" ><i class="fa fa-globe " style="margin-right: 5px;"></i>影像</button>
                    <button id="type_c1" onclick="layerChange(1)" type="button" class="layui-btn" style="background: rgba(40, 229, 233, .5);"><i class="fa fa-map-signs" style="margin-right: 5px;"></i>地形</button>
                    <button id="type_c2" onclick="layerChange(2)" type="button" class="layui-btn" style="background: rgba(40, 229, 233, .5);border-radius: 0 10px 10px 0;"><i class="layui-icon" style="margin-right: 5px;"> &#xe656;</i>工程图层</button>
                </div>
            </div>
            <div class="baseBoxRight right szdd" style="position: absolute;width: 33%; height: 16%; margin-left: 33.5%;">
                <ul class="plant">
                    <li>
                        <a class="jumps" href="" style="background-color: #000a3f4d;">
                            <div>
                                <span>地下水用量(亿方)</span>
                                <img src="img/qqzmj.png" alt="">
                            </div>
                            <p class="">0</p>
                            <span class="spans3" style="background: #00ffff;"></span>
                        </a>
                    </li>
                    <li>
                        <a class="jumps" href="" style="background-color: #000a3f4d;">
                            <div>
                                <span>地下水指标(亿方)</span>
                                <img src="img/ccc2.png" alt="">
                            </div>
                            <p class="">0</p>
                            <span class="spans2" style="background: #ff7f00;"></span>
                        </a>
                    </li>
                    <li>
                        <a class="jumps" href="" style="background-color: #000a3f4d;">
                            <div>
                                <span>地标水用量(亿方)</span>
                                <img src="img/ccc.png" alt="">
                            </div>
                            <p class="">0</p>
                            <span class="spans3" style="background: #00ff00;"></span>
                        </a>
                    </li>
                    <li>
                        <a class="jumps" href="" style="background-color: #000a3f4d;">
                            <div>
                                <span>地标水指标(亿方)</span>
                                <img src="img/ccc.png" alt="">
                            </div>
                            <p class="">0</p>
                            <span class="spans3" style="background: #ff0000;"></span>
                        </a>
                    </li>
<!--                    <li>-->
<!--                        <a class="jumps" href="" style="background-color: #000a3f4d;">-->
<!--                            <div>-->
<!--                                <span>渠道(条)</span>-->
<!--                                <img src="img/ccc.png" alt="">-->
<!--                            </div>-->
<!--                            <p class="">2000</p>-->
<!--                            <span class="spans3" style="background: #00ffff;"></span>-->
<!--                        </a>-->
<!--                    </li>-->
<!--                    <li>-->
<!--                        <a class="jumps" href="" style="background-color: #000a3f4d;">-->
<!--                            <div class="clear plantTop ">-->
<!--                                <span class="flexLeft">机电井(眼)</span>-->
<!--                                <img class="flexright" src="img/cy.png" alt="">-->
<!--                            </div>-->
<!--                            <p class=" plantNum1">3207</p>-->
<!--                            <span class="spans0" style="background: #0000ff;"></span>-->
<!--                        </a>-->
<!--                    </li>-->
<!--                    <li>-->
<!--                        <a class="jumps" href="" style="background-color: #000a3f4d;">-->
<!--                            <div class="clear plantTop ">-->
<!--                                <span class="flexLeft">灌区测点(个)</span>-->
<!--                                <img class="flexright" src="img/cq.png" alt="">-->
<!--                            </div>-->
<!--                            <p class=" plantNum1">157</p>-->
<!--                            <span class="spans1" style="background: #8b00ff;"></span>-->
<!--                        </a>-->
<!--                    </li>-->
<!--                    <li>-->
<!--                        <a class="jumps" href="" style="background-color: #000a3f4d;">-->
<!--                            <div>-->
<!--                                <span>人饮工程(个)</span>-->
<!--                                <img src="img/cn.png" alt="">-->
<!--                            </div>-->
<!--                            <p class="">36</p>-->
<!--                            <span class="spans2" style="background: Violet;"></span>-->
<!--                        </a>-->
<!--                    </li>-->

                </ul>
            </div>
<!--            <div class="baseBoxLeft left szdd" id="right_1" style="position: absolute;background-color: #000a3f82;width: 20%;height: 32%;border-radius: 10px;margin-left: 80.5%; margin-top: 10px;">-->
<!--                <img src="img/right.png" alt="">-->
<!--                <div class="csbaseBox1">-->
<!--                    <div class="boxTitle">一张图工具箱</div>-->

<!--                    <button id="other_tool" onclick="toolChange(2)" type="button" class="layui-btn" style="background: rgba(40, 229, 233, .5);border-radius: 10px 10px 10px 10px;margin-left: 33%;margin-top: 3%;"><i class="fa fa-briefcase" style="margin-right: 5px;"></i>地图测量工具</button>-->
<!--                    <button id="element_search" onclick="toolChange(1)" type="button" class="layui-btn" style="background: rgba(40, 229, 233, .5);border-radius: 10px 10px 10px 10px;margin-left: 33%;margin-top: 2%;"><i class="fa fa-bar-chart " style="margin-right: 5px;padding: 0px;"></i>基础要素查询</button>-->
<!--                    <button id="water_monitor" onclick="toolChange(0)" type="button" class="layui-btn" style="background: rgba(40, 229, 233, .5);border-radius: 10px 10px 10px 10px;margin-left: 33%;margin-top: 2%;" ><i class="layui-icon" style="margin-right: 5px;padding: 0px;">&#xe615;</i>监测数据查询</button>-->


<!--                    <div id="measure_box" class="layui-btn-group" style="margin-left: 19%;margin-top: 5%;height: 45px;display: none;">-->
<!--                        <button id="length_measure" onclick="measureChange(0)" type="button" class="layui-btn" style="background: rgba(40, 229, 233, .5);border-radius: 10px 0 0 10px;border:3px solid #28e5e9" ><i class="fa fa-pencil" style="margin-right: 5px;"></i>测距</button>-->
<!--                        <button id="polygon_measure" onclick="measureChange(1)" type="button" class="layui-btn" style="background: rgba(40, 229, 233, .5);"><i class="fa fa-map" style="margin-right: 5px;"></i>测面</button>-->
<!--                        <button id="clear_measure" onclick="measureChange(2)" type="button" class="layui-btn" style="background: rgba(40, 229, 233, .5);border-radius: 0 10px 10px 0;"><i class="fa fa-trash" style="margin-right: 5px;"> </i>清除</button>-->
<!--                    </div>-->
<!--                    <button id="close_measure" onclick="close_measure()" type="button" class="layui-btn" style="background: rgba(40, 229, 233, .5);border-radius: 10px 10px 10px 10px;margin-left: 33%;margin-top: 2%;display: none;" ><i class="fa fa-times-circle" style="margin-right: 5px;"></i>关闭测量工具箱</button>-->

<!--                </div>-->
<!--            </div>-->
<!--            <div class="baseBoxLeft left" id="right_2" style="position: absolute;background-color: #000a3f82;width: 20%;height: 32%;border-radius: 10px;margin-left: 80.5%; margin-top: 16%;">-->
<!--                <img src="img/right2.png" alt="" style="height: 98%;width: 97%;margin-left: 5px;">-->
<!--                &lt;!&ndash; 四个角描边 end &ndash;&gt;-->
<!--                <div class="boxTitle2">水利工程巡检记录</div>-->
<!--                <div class="boxRader" id="wind"></div>-->
<!--            </div>-->
            <div class="baseBoxLeft left szdd" id="right_3" style="display:none;position: absolute;background-color: #000a3f82;width: 20%;height: 67.5%;border-radius: 10px;margin-left: 80.5%; margin-top: 15.5%;">
                <img src="img/right2_modify.png"  alt="" style="height: 99%;width: 97%;margin-left: 5px;">
                <!-- 四个角描边 end -->
                <div class="boxTitle2" style="height: 5%;">水库库容统计</div>
                <div class="boxRader" id="Progress" style="height: 89%;"></div>
            </div>
            <div class="baseBoxLeft left " id="right_4" style="display:none;position: absolute;background-color: #000a3f82;width: 20%;height: 100.5%;border-radius: 10px;margin-left: 80.5%; margin-top: 10px;">
                <img src="img/right_big.png" alt="">
                <div class="csbaseBox1" style="height: 80%;">
                    <div style="position: absolute;margin-left: 89%;top: -20px;">
                        <button id="element_gbs" onclick="elementChange(16)" type="button" class="layui-btn" style="background: #28e5e900;border-radius: 10px;"><i class="fa fa-times-circle" style="margin-right: 5px;font-size: 18px;color: #28e5e9;"></i></button>
                    </div>
                    <div class="boxTitle" style="margin-left: 0px;">基础要素查询</div>

                    <div style="height: 135px;margin-top: 5%;overflow: scroll;overflow-x: hidden" class="noScroll">
                        <div class="layui-btn-group" style="margin-left: 10%;height: 45px;">
                            <button id="element_sk" onclick="elementChange(0)"  type="button" class="layui-btn" style="background: rgba(40, 229, 233, .8);border-radius: 10px 0 0 10px;" ><i class="fa fa-adjust" style="margin-right: 5px;font-size: 16px;"></i>水库</button>
                            <button id="element_rygc" onclick="elementChange(1)" type="button" class="layui-btn" style="background: rgba(40, 229, 233, .5);width: 113px;"><i class="fa fa-street-view" style="margin-right: 5px;font-size: 16px;"></i>人饮工程</button>
                            <button id="element_hl" onclick="elementChange(2)" type="button" class="layui-btn" style="background: rgba(40, 229, 233, .5);border-radius: 0 10px 10px 0;width: 83px;"><i class="fa fa-dot-circle-o" style="margin-right: 5px;"></i>河流</button>
                        </div>
                        <div class="layui-btn-group" style="margin-left: 10%;height: 45px;">
                            <button id="element_dq" onclick="elementChange(8)" type="button" class="layui-btn" style="background: rgba(40, 229, 233, .5);border-radius: 10px 0 0 10px;" ><i class="fa fa-leaf" style="margin-right: 5px;"></i>斗渠</button>
                            <button id="element_ggqd" onclick="elementChange(3)" type="button" class="layui-btn" style="background: rgba(40, 229, 233, .5);"><i class="fa fa-anchor" style="margin-right: 5px;"></i>骨干渠道</button>
                            <button id="element_sz" onclick="elementChange(5)" type="button" class="layui-btn" style="background: rgba(40, 229, 233, .5);border-radius: 0 10px 10px 0;"><i class="fa fa-beer" style="margin-right: 5px;"></i>水闸</button>
                        </div>
                        <div class="layui-btn-group" style="margin-left: 10%;height: 45px;">
                            <button id="element_sb" onclick="elementChange(10)" type="button" class="layui-btn" style="background: rgba(40, 229, 233, .5);border-radius: 10px 0 0 10px;padding-left: 19px;padding-right: 19px;" ><i class="fa fa-podcast" style="margin-right: 5px;"></i>首部</button>
                            <button id="element_swcz" onclick="elementChange(4)" type="button" class="layui-btn" style="background: rgba(40, 229, 233, .5);padding-left: 19px;padding-right: 19px;"><i class="fa fa-crosshairs" style="margin-right: 5px;"></i>水文测站</button>
                            <button id="element_bz" onclick="elementChange(11)" type="button" class="layui-btn" style="background: rgba(40, 229, 233, .5);border-radius: 0 10px 10px 0;padding-left: 17px;padding-right: 17px;"><i class="layui-icon" style="margin-right: 0;">&#xe628;</i>泵站</button>
                        </div>
                        <div class="layui-btn-group" style="margin-left: 10%;height: 45px;">
                            <button id="element_df" onclick="elementChange(12)" type="button" class="layui-btn" style="background: rgba(40, 229, 233, .5);border-radius: 10px 0 0 10px;padding-left: 20px;padding-right: 20px;" ><i class="fa fa-ellipsis-h" style="margin-right: 5px;"></i>堤防</button>
                            <button id="element_xhtd" onclick="elementChange(13)" type="button" class="layui-btn" style="background: rgba(40, 229, 233, .5);padding-left: 20px;padding-right: 20px;"><i class="fa fa-code-fork" style="margin-right: 6px;"></i>泄洪通道</button>
                            <button id="element_jdj" onclick="elementChange(6)" type="button" class="layui-btn" style="background: rgba(40, 229, 233, .5);border-radius: 0 10px 10px 0;padding-left: 18px;padding-right: 18px;"><i class="fa fa-beer" style="margin-right: 5px;"></i>机井</button>
                        </div>
                        <div class="layui-btn-group" style="margin-left: 10%;height: 45px;">
                            <button id="element_sdz" onclick="elementChange(14)" type="button" class="layui-btn" style="background: rgba(40, 229, 233, .5);border-radius: 10px 0 0 10px;padding: 0 15px 0 15px;" ><i class="fa fa-bolt" style="margin-right: 5px;"></i>水电站</button>
                            <button id="element_gqcsd" onclick="elementChange(7)" type="button" class="layui-btn" style="background: rgba(40, 229, 233, .5);padding-left: 18px;padding-right: 17px;"><i class="fa fa-anchor" style="margin-right: 5px;"></i>灌区测点</button>
                            <button id="element_qsk" onclick="elementChange(15)" type="button" class="layui-btn" style="background: rgba(40, 229, 233, .5);border-radius: 0 10px 10px 0;padding: 0 11px 0 11px;"><i class="fa fa-circle-o-notch " style="margin-right: 5px;"></i>取水口</button>
                        </div>
                        <div class="layui-btn-group" style="margin-left: 10%;border-bottom: 1px solid #28e5e9;height: 45px;">
                            <button id="element_gb" onclick="elementChange(16)" type="button" class="layui-btn" style="background: rgba(40, 229, 233, .5);border-radius: 10px;width: 280px;"><i class="fa fa-times-circle" style="margin-right: 5px;"></i>关闭</button>
                        </div>

                    </div>

                    <div style="height: 8%;margin-top:5%;width: 88%;margin-left: 7%;">
                        <form class="layui-form" action="" style="width: 200px;margin-right: 20px;display: inline-block;">
                            <div class="layui-form-item" style="margin-bottom: 0px;">
                                <input class="layui-input"  id="element_find" autocomplete="off" placeholder="请输入水利工程名称" style="color:white;border-radius: 10px;border: 1px solid #28e5e9;background: #28e5e900;">
                            </div>
                        </form>
                        <button id="element_find_button" type="button" class="layui-btn layui-btn-radius layui-btn-normal" style="background: #28e5e9cc;padding: 0 8px;line-height: 0px;height: 34px;"><i class="layui-icon" >&#xe615;</i>搜索</button>
                    </div>
                    <div style="overflow: scroll;height: 79%;width: 88%;margin-left: 7%;padding-bottom: 1px;" class="element_talbe_dev noScroll">
                        <table class="equipment_table_e env_table_e" id="element_talbe" lay-filter="element_talbe">

                        </table>
                    </div>

                </div>
            </div>
            <div class="baseBoxLeft left monitorDay" id="right_5" style="position: absolute;background-color: #000a3f82;width: 22%;height: 90.6%;border-radius: 10px;margin-left: 78.6%; margin-top: 5%;">
                <img src="img/FsModify.png" alt="">
                <div class="csbaseBox1" style="height: 80%;">
                    <div class="boxTitle" style="margin-left: 31%;">监测数据查询</div>

                </div>
            </div>

        </div>
<!--        element-ui功能模块-->
        <div id="app_1">
            <div class="el-select-gc frontPage">
                <div class="projectTitleRight">
                    <template>
                        <el-select v-model="groupSelect" placeholder="行政区划">
                            <el-option
                                    v-for="item in groupInfo"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </template>
                </div>
                <div class="projectTitleLeft">
                    <template>
                        <el-select v-model="projectSelect" @change="projectSelectChange" placeholder="水利工程">
                            <el-option
                                    v-for="item in projectInfo"

                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </template>
                </div>
                <div class="projectTitleLeftCount">
                    <el-button type="primary" plain>{{projectCount}}</el-button>
                </div>

                <template>
                    <el-table
                            :data="projectData"
                            border
                            style="width: 100%;">
                        <el-table-column
                                label="序号"
                                width="55">
                            <template slot-scope="scope">
                                <span >{{ scope.row.order }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="工程名称"
                                :show-overflow-tooltip="true"
                                width="170">
                            <template slot-scope="scope">
                                <span >{{ scope.row.name }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="详情"
                                width="65">
                            <template slot-scope="scope">
                                <el-button
                                        size="mini"
                                        icon="el-icon-monitor"
                                        @click="handleProjectInfo(scope.$index, scope.row)"
                                        circle></el-button>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="定位">
                            <template slot-scope="scope">
                                <el-button
                                        size="mini"
                                        icon="el-icon-coordinate"
                                        circle
                                        @click="handleProjectLocation(scope.$index, scope.row)"></el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="block pageFooter">
                        <el-pagination
                                @current-change="handleCurrentChange"
                                :current-page="currentPage"
                                :page-sizes="[10, 20, 30, 40, 50]"
                                :page-size="pageSize"
                                :pager-count="5"
                                layout="prev, pager, next, jumper"
                                :total="totalPage">
                        </el-pagination>
                    </div>
                </template>
            </div>
            <div class="monitorClass frontPage">
                <template>
                    <el-tabs v-model="monitorName" >
                        <el-tab-pane name="wadiMonitor">
                            <span slot="label"><i class="el-icon-odometer"></i>河道监测</span>
                            <template>
                                <el-table
                                        :data="wadiMonitorData"
                                        border
                                        style="width: 100%;">
                                    <el-table-column
                                            label="序号"
                                            width="55">
                                        <template slot-scope="scope">
                                            <span >{{ scope.row.order }}</span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                            label="测站名称"
                                            :show-overflow-tooltip="true"
                                            width="105">
                                        <template slot-scope="scope">
                                            <span >{{ scope.row.name }}</span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                            label="流量(m³/s)"
                                            :show-overflow-tooltip="true"
                                            width="100">
                                        <template slot-scope="scope">
                                            <span >{{ scope.row.monitor }}</span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                            label="详情"
                                            width="65">
                                        <template slot-scope="scope">
                                            <el-button
                                                    size="mini"
                                                    icon="el-icon-monitor"
                                                    circle></el-button>
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                            label="定位">
                                        <template slot-scope="scope">
                                            <el-button
                                                    size="mini"
                                                    icon="el-icon-coordinate"
                                                    circle
                                                    @click="handleProjectLocation(scope.$index, scope.row)"></el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                                <div class="block pageFooter">
                                    <el-pagination
                                            @current-change=""
                                            :current-page="currentPageWadi"
                                            :page-sizes="[10, 20, 30, 40, 50]"
                                            :page-size="pageSizeWadi"
                                            :pager-count="5"
                                            layout="prev, pager, next, jumper"
                                            :total="totalPageWadi">
                                    </el-pagination>
                                </div>
                            </template>
                        </el-tab-pane>
                        <el-tab-pane name="reservoirMonitor">
                            <span slot="label"><i class="el-icon-help"></i>水库监测</span>
                            <template>
                                <el-table
                                        :data="reservoirMonitorData"
                                        border
                                        style="width: 100%;">
                                    <el-table-column
                                            label="序号"
                                            width="55">
                                        <template slot-scope="scope">
                                            <span >{{ scope.row.order }}</span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                            label="测站名称"
                                            :show-overflow-tooltip="true"
                                            width="105">
                                        <template slot-scope="scope">
                                            <span >{{ scope.row.name }}</span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                            label="水位(m)"
                                            :show-overflow-tooltip="true"
                                            width="100">
                                        <template slot-scope="scope">
                                            <span >{{ scope.row.name }}</span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                            label="详情"
                                            width="65">
                                        <template slot-scope="scope">
                                            <el-button
                                                    size="mini"
                                                    icon="el-icon-monitor"
                                                    circle></el-button>
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                            label="定位">
                                        <template slot-scope="scope">
                                            <el-button
                                                    size="mini"
                                                    icon="el-icon-coordinate"
                                                    circle
                                                    @click="handleProjectLocation(scope.$index, scope.row)"></el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                                <div class="block pageFooter">
                                    <el-pagination
                                            @current-change=""
                                            :current-page="currentPageReservoir"
                                            :page-sizes="[10, 20, 30, 40, 50]"
                                            :page-size="pageSizeReservoir"
                                            :pager-count="5"
                                            layout="prev, pager, next, jumper"
                                            :total="totalPageReservoir">
                                    </el-pagination>
                                </div>
                            </template>
                        </el-tab-pane>
                        <el-tab-pane name="rainMonitor">
                            <span slot="label"><i class="el-icon-umbrella"></i>雨情监测</span>
                            <template>
                                <el-table
                                        :data="rainMonitorData"
                                        border
                                        style="width: 100%;">
                                    <el-table-column
                                            label="序号"
                                            width="55">
                                        <template slot-scope="scope">
                                            <span >{{ scope.row.order }}</span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                            label="测站名称"
                                            :show-overflow-tooltip="true"
                                            width="105">
                                        <template slot-scope="scope">
                                            <span >{{ scope.row.name }}</span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                            label="雨量(mm)"
                                            :show-overflow-tooltip="true"
                                            width="100">
                                        <template slot-scope="scope">
                                            <span >{{ scope.row.monitor }}</span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                            label="详情"
                                            width="65">
                                        <template slot-scope="scope">
                                            <el-button
                                                    size="mini"
                                                    icon="el-icon-monitor"
                                                    circle></el-button>
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                            label="定位">
                                        <template slot-scope="scope">
                                            <el-button
                                                    size="mini"
                                                    icon="el-icon-coordinate"
                                                    circle
                                                    @click="handleProjectLocation(scope.$index, scope.row)"></el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                                <div class="block pageFooter">
                                    <el-pagination
                                            @current-change=""
                                            :current-page="currentPageRain"
                                            :page-sizes="[10, 20, 30, 40, 50]"
                                            :page-size="pageSizeRain"
                                            :pager-count="5"
                                            layout="prev, pager, next, jumper"
                                            :total="totalPageRain">
                                    </el-pagination>
                                </div>
                            </template>
                        </el-tab-pane>
                    </el-tabs>
                </template>
            </div>
            <div id="qdxs" class="qdxs">
                <el-switch
                        v-model="value_switch"
                        active-text="地图点击查询"
                        active-color="#13ce66"
                        @change="changeSwitch(value_switch)">
                </el-switch>
            </div>
            <div class="qdxsText">
                <el-switch
                        v-model="value_switch_text"
                        active-text="水利工程名称"
                        v-show="false"
                        active-color="#13ce66"
                        @change="changeSwitchText(value_switch_text)">
                </el-switch>
            </div>
            <div class="fsgx" >
                <img src="img/FsModify.png" class="fsgxImg" alt="">
                <div class="fsgxTitle" >{{ skTitleName }}</div>
            </div>
            <div class="fsgxReal" >
                <div class="fsgcContainer0">
                    <div class="fsgcContainer1" >
                        <div id="tableFs" class="fsgxContent" @click.stop></div>
                    </div>
                </div>

            </div>
            <div class="skSelect">
                <template>
<!--                    有默认回调参数，就算不传，也是那个参数-->
                    <el-select v-model="valueSkName" value-key="value" v-show="false" @change="changeSkName(valueSkName)">
                        <el-option
                                v-for="item in skName"
                                :key="item.value"
                                :label="item.label"
                                :value="item">
                        </el-option>
                    </el-select>
                </template>
            </div>
            <div class="czContent">
                <el-dialog :visible.sync="dialogVisibleReservoir" :show-close=true center @opened="infoOpenedHandle()">
                    <div slot="title" class="dialog-title">
                        <span class="title-text">{{dialogTitleReservoir}}</span>
                        <i class="el-icon-place"></i>
                    </div>

                    <el-tabs type="border-card">
                        <el-tab-pane >
                            <span slot="label"><i class="el-icon-date"></i> 基础信息</span>
                            <div class="reservoirClass">
                                <el-descriptions class="margin-top" :column="1" :size="sizeProjectInfo" border>
                                    <template v-for="site in reservoirDataInfo">
                                        <el-descriptions-item>
                                            <template slot="label">
                                                <i class="el-icon-user"></i>
                                                {{site.reservoirName}}
                                            </template>
                                            {{site.reservoirInfo}}
                                        </el-descriptions-item>
                                    </template>
                                </el-descriptions>
                            </div>

                            <el-row class="paddingRow">
                                <el-col :span="24">
                                    <div class="grid-content bg-purple szInfoContent">
                                        <template>
                                            <div class="block">
                                                <el-button type="primary" icon="el-icon-edit">编辑</el-button>
                                            </div>
                                        </template>
                                    </div>
                                </el-col>
                            </el-row>
                        </el-tab-pane>
                        <el-tab-pane>
                            <span slot="label"><i class="el-icon-date"></i>实时监测</span>
                            <el-row class="paddingRow">
                                <el-col :span="24">
                                    <div class="grid-content bg-purple szInfoContent">
                                        <template>
                                            <div class="block">
                                                <span class="demonstration czDateTitle">测站计量信息时间段选择:</span>
                                                <el-date-picker
                                                        v-model="date1"
                                                        type="daterange"
                                                        align="right"
                                                        unlink-panels
                                                        range-separator="至"
                                                        start-placeholder="开始日期"
                                                        end-placeholder="结束日期"
                                                        :picker-options="pickerOptions">
                                                </el-date-picker>
                                                <el-button type="primary" icon="el-icon-search">查询</el-button>
                                            </div>
                                        </template>
                                    </div>
                                </el-col>
                            </el-row>
                        </el-tab-pane>
                        <el-tab-pane>
                            <span slot="label"><i class="el-icon-date"></i>设施照片</span>
                            <el-row class="paddingRow">
                                <el-col :span="24">
                                    <div class="grid-content bg-purple szInfoContent">
                                        <template>
                                            <div class="block">
                                                <span class="demonstration czDateTitle">测站计量信息时间段选择:</span>
                                                <el-date-picker
                                                        v-model="date1"
                                                        type="daterange"
                                                        align="right"
                                                        unlink-panels
                                                        range-separator="至"
                                                        start-placeholder="开始日期"
                                                        end-placeholder="结束日期"
                                                        :picker-options="pickerOptions">
                                                </el-date-picker>
                                                <el-button type="primary" icon="el-icon-search">查询</el-button>
                                            </div>
                                        </template>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="12">

                                </el-col>
                                <el-col :span="12">
                                    <div class="czChart" id="czChart">

                                    </div>
                                </el-col>
                            </el-row>
                        </el-tab-pane>
                        <el-tab-pane>
                            <span slot="label"><i class="el-icon-date"></i>视频信息</span>
                            <el-row class="paddingRow">
                                <el-col :span="24">
                                    <div class="grid-content bg-purple szInfoContent">
                                        <template>
                                            <div class="block">
                                                <span class="demonstration czDateTitle">测站计量信息时间段选择:</span>
                                                <el-date-picker
                                                        v-model="date1"
                                                        type="daterange"
                                                        align="right"
                                                        unlink-panels
                                                        range-separator="至"
                                                        start-placeholder="开始日期"
                                                        end-placeholder="结束日期"
                                                        :picker-options="pickerOptions">
                                                </el-date-picker>
                                                <el-button type="primary" icon="el-icon-search">查询</el-button>
                                            </div>
                                        </template>
                                    </div>
                                </el-col>
                            </el-row>
                        </el-tab-pane>
                    </el-tabs>

                </el-dialog>
            </div>
        </div>


    </div>


    <div id="popup" class="ol-popup" style="border-radius: 10px !important;display: none;">
        <a href="#" id="popup-closer" class="ol-popup-closer"></a>
        <div id="popup-content" style="font-size: 13px;"></div>
    </div>

<!--    当div和overlay结合后，样式的修改比较繁琐，因此设置两层，外层用于包裹，内层用于装饰-->
    <div id="element_popup" class="ol-popup_map" style="display: none;">
        <a href="#" id="element_popup-closer" class="ol-popup-closer_map"></a>
        <div id="element_popup-content" style="font-size: 13px;">
            <img src="img/nice_location_blue.png" style="cursor: pointer;position: absolute;height: 30px;bottom: -40px;left: 193px;"  alt="定位"/>
            <div style="display: inline-block;margin-top: 3px;">
                <p style="font-size: 21px;margin-bottom: 3px" id="element_name">哈哈24</p>
            </div>
            <div id="element_describe" style="display: inline-block;bottom: 0px;background: #ffffff;width: 100%;left: 0px;height: 420px;border-radius: 0 0 9px 9px;position: absolute;overflow: scroll;">
                <table class="layui-table" lay-even>
                    <colgroup>
                        <col width="160">
                    </colgroup>
                    <tbody id="project_detail">

                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!--    当div和overlay结合后，样式的修改比较繁琐，因此设置两层，外层用于包裹，内层用于装饰-->
    <div id="projectPopup" class="ol-popup_map olPopupProject" style="display: none;">
        <a href="#" id="projectPopupCloser" class="ol-popup-closer_map"></a>
        <div id="projectPopupContent" style="font-size: 13px;">
            <img src="img/nice_location_blue.png" style="cursor: pointer;position: absolute;height: 30px;bottom: -40px;left: 193px;"  alt="定位"/>
            <div style="display: inline-block;margin-top: 3px;">
                <p style="font-size: 21px;margin-bottom: 3px" id="projectPopupname">哈哈24</p>
            </div>
        </div>
    </div>



<!--引入各类函数-->
<!--    <script src="js/video.js"></script>-->
<!--    <script src="js/videojs-contrib-hls.min.js" type="text/javascript"></script>-->
    <!-- 必须先引入vue，  后使用element-ui -->
    <script src="vue-dev/dist/vue.js"></script>
    <!-- 引入element 的组件库-->
    <script src="element-ui/lib/index.js"></script>
    <script src="openlayers/ol.js"></script>
    <script type="text/javascript"  src="superMap_for_openlayers/iclient-ol.js"></script>
    <script type="text/javascript"  src="superMap_for_openlayers/include-web.js"></script>
    <script src="layui/layui.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/echarts.js"></script>
    <script src="js/echarts-gl.js"></script>
    <script src="js/ol3Echarts.js"></script>
    <script src="js/dataScoll.js"></script>

    <script src="js/NineDivision_base.js"></script>
    <script src="js/index_layui.js"></script>
    <script src="js/public.js"></script>
    <script src="js/projectInfo.js"></script>
    <script src="js/set_map.js"></script>




</body>

</html>

